<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Labels</title>

  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    HTML,
    BODY
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    #Demo-ControlPanel
    {
      overflow: hidden;
      padding: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #E0E0E0;
    }
    .Basis-Field
    {
      float: left;
      margin-right: 4ex;
    }

    .Basis-Slider
    {
      max-width: 300px;
    }

    .DemoGroup
    {
      overflow: hidden;
    }

    .DemoBlock
    {
      border: 1px solid #D0D0D0;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
      border-radius: 3px;
      padding: 15px;
      margin: 0 0 .5em 10px;
      overflow: hidden;
      position: relative;
      float: left;
      width: 28%;
    }
    .DemoBlock H2
    {
      font-size: 80%;
      font-weight: normal;
      background: #EEE;
      margin: -15px -15px 10px -15px;
      padding: 2px;
      text-align: center;
    }
    .DemoBlock-Content
    {
      height: 20px;
      position: relative;
    }

    .Basis-Label
    {
      position: absolute;
      width: 60%;
      margin-left: -30%;
      top: 2em;
      left: 50%;
      padding: .25em 0;
      border: 1px solid #E0E0E0;
      background: #F4F4F4;
      text-align: center;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
      border-radius: 3px;
    }
    .Basis-Label-Processing
    {
      background-color: #FFE8C0;
      color: #AA6600;
      border-color: #DD9900;
    }
    .Basis-Label-Error
    {
      background-color: #FFE8E0;
      color: #AA0000;
      border-color: #AA0000;
    }

    .DemoBlock-Node
    {
      padding: 2px;
      border: 1px solid #E0E0E0;
      background: #F0F0F0;
      margin-right: 1ex;
    }

  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basic demos: Labels</h1>
  
  <p id="demo-summary">
    ..
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script type="text/javascript" id="demo-javascript">
    
    // import names
    var DOM = basis.dom;
    var STATE = basis.data.STATE;
    var DELEGATE = basis.dom.wrapper.DELEGATE;
    var nsLabel = basis.ui.label;

    var DataObject = basis.data.DataObject;

   /**
    * @class
    */
    var DemoBlock = basis.ui.Container.subclass({
      template:
        '<div class="DemoBlock">' +
           '<h2>{title}</h2>' +
           '<div{childNodesElement} class="DemoBlock-Content"><!--{label}--></div>' +
        '</div>',

      binding: {
        title: 'title',
        label: 'satellite:'
      },

      childClass: {
        template:
          '<span class="DemoBlock-Node">{value}</span>',

        binding: {
          value: 'data:value'
        }
      }
    });

    //
    // Main part
    //

    var items = Array.create(8, function(idx){
      return new DataObject({ data: { value: idx + 1 } });
    });

    var commonObject = new DataObject;
    var commonDataSource = new basis.data.Dataset;

    // Controls

    DOM.insert(DOM.get('demo-container'),
      DOM.createElement('#Demo-ControlPanel',
        new basis.ui.form.RadioGroup({
          title: 'Object state:',
          childNodes: STATE.getList().map(function(state){
            return {
              selected: STATE[state] == commonObject.state,
              title: state,
              value: {
                state: STATE[state],
                data: state == STATE.ERROR ? 'Some error message' : null
              }
            }
          }),
          handler: {
            change: function(){
              var value = this.getValue();
              commonObject.setState(value && value.state, value && value.data);
            }
          }
        }).element,

        new basis.ui.form.RadioGroup({
          title: 'Dataset state:',
          childNodes: STATE.getList().map(function(state){
            return {
              selected: STATE[state] == commonDataSource.state,
              title: state,
              value: {
                state: STATE[state],
                data: state == STATE.ERROR ? 'Some error message' : null
              }
            }
          }),
          handler: {
            change: function(){
              var value = this.getValue();
              commonDataSource.setState(value && value.state, value && value.data);
            }
          }
        }).element,

        new basis.ui.slider.Slider({
          value: 5,
          max: 8,
          handler: {
            change: function(){
              commonDataSource.set(items.slice(0, this.value));
            }
          }
        }).element
      )
    );

    //
    // Demo blocks
    //

    new basis.ui.Container({
      container: DOM.get('demo-container'),

      childClass: DemoBlock,

      grouping: {
        groupGetter: Function.getter('groupId'),
        childClass: {
          cssClassName: 'DemoGroup'
        }
      },

      childNodes: [
        new DemoBlock({
          title: 'basis.ui.label.NodeLabel',
          groupId: 'Abstract',
          satelliteConfig: {
            label: nsLabel.NodeLabel
          }
        }),


        //
        // Owner state labels
        //

        new DemoBlock({
          title: 'basis.ui.label.State with autoDelegate',
          groupId: 'OwnerState',
          delegate: commonObject,
          satelliteConfig: {
            label: {
              instanceOf: nsLabel.State,
              config: {
                autoDelegate: DELEGATE.OWNER,
                handler: {
                  stateChanged: function(){
                    this.templateUpdate(this.tmpl, 'stateChanged');
                  }
                },
                templateUpdate: function(tmpl, eventName){
                  if (!eventName || eventName == 'stateChanged')
                    this.element.innerHTML = this.state;
                }
              }
            }
          }
        }),

        new DemoBlock({
          title: 'basis.ui.label.State w/o autoDelegate',
          groupId: 'OwnerState',
          delegate: commonObject,
          satelliteConfig: {
            label: {
              instanceOf: nsLabel.State,
              config: {
                handler: {
                  ownerChanged: function(){
                    if (this.owner)
                      this.templateUpdate(this.tmpl, 'ownerStateChanged');
                  }
                },
                listen: {
                  owner: {
                    stateChanged: function(){
                      this.templateUpdate(this.tmpl, 'ownerStateChanged');
                    }
                  }
                },
                templateUpdate: function(tmpl, eventName){
                  if (!eventName || eventName == 'ownerStateChanged')
                    this.element.innerHTML = this.owner.state;
                }
              }
            }
          }
        }),

        new DemoBlock({
          title: 'basis.ui.label.Processing',
          groupId: 'OwnerState',
          delegate: commonObject,
          satelliteConfig: {
            label: nsLabel.Processing
          }
        }),

        new DemoBlock({
          title: 'basis.ui.label.Error',
          groupId: 'OwnerState',
          delegate: commonObject,
          satelliteConfig: {
            label: nsLabel.Error
          }
        }),

        //
        // Owner dataSource state labels
        //

        new DemoBlock({
          title: 'basis.ui.label.DataSourceState',
          groupId: 'OwnerDataSource',
          dataSource: commonDataSource,
          satelliteConfig: {
            label: {
              instanceOf: nsLabel.DataSourceState,
              config: {
                autoDelegate: DELEGATE.OWNER,
                listen: {
                  ownerDataSource: {
                    stateChanged: function(){
                      this.templateUpdate(this.tmpl, 'stateChanged');
                    }
                  }
                },
                templateUpdate: function(tmpl, eventName){
                  if (!eventName || eventName == 'stateChanged')
                    this.element.innerHTML = this.ownerDataSource.state;
                }
              }
            }
          }
        }),

        new DemoBlock({
          title: 'basis.ui.label.DataSourceProcessing',
          groupId: 'OwnerDataSource',
          dataSource: commonDataSource,
          satelliteConfig: {
            label: nsLabel.DataSourceProcessing
          }
        }),

        new DemoBlock({
          title: 'basis.ui.label.DataSourceError',
          groupId: 'OwnerDataSource',
          dataSource: commonDataSource,
          satelliteConfig: {
            label: nsLabel.DataSourceError
          }
        }),


        //
        // Owner dataSource items labels
        //

        new DemoBlock({
          title: 'basis.ui.label.DataSourceItemCount',
          groupId: 'OwnerDataSourceItems',
          dataSource: commonDataSource,
          satelliteConfig: {
            label: {
              instanceOf: nsLabel.DataSourceItemCount,
              config: {
                handler: {
                  condChanged: function(){
                    this.tmpl.count.nodeValue = this.owner && this.owner.dataSource ? this.owner.dataSource.itemCount : 0;
                  }
                }
              }
            }
          }
        }),

        new DemoBlock({
          title: 'basis.ui.label.DataSourceEmpty',
          groupId: 'OwnerDataSourceItems',
          dataSource: commonDataSource,
          satelliteConfig: {
            label: nsLabel.DataSourceEmpty
          }
        }),


        //
        // Owner child nodes label
        //

        new DemoBlock({
          title: 'basis.ui.label.ChildNodesCount',
          groupId: 'OwnerChildNodes',
          delegate: commonObject,
          dataSource: commonDataSource,
          satelliteConfig: {
            label: {
              instanceOf: nsLabel.ChildNodesCount,
              config: {
                handler: {
                  condChanged: function(){
                    this.tmpl.count.nodeValue = this.owner ? this.owner.childNodes.length : 0;
                  }
                }
              }
            }
          }
        }),

        new DemoBlock({
          title: 'basis.ui.label.Empty',
          groupId: 'OwnerChildNodes',
          delegate: commonObject,
          dataSource: commonDataSource,
          satelliteConfig: {
            label: nsLabel.Empty
          }
        })
      ]
    });


  </script>
</body>

</html>
